<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<style>
    .buttonContainer {
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .btn {
        float: left;
        padding: 5px;
        margin: 5px;
    }

    #chkLightingEnabled {
        position: absolute;
        top: 60px;
        left: 10px;
        color: white;
    }

    #chkLightingEnabled div {
        float: left;
    }

    #chkLightingEnabled input {
        float: left;
    }
</style>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <div class="buttonContainer">
        <button id="btnActivate" class="btn">Activate</button>
        <button id="btnStop" class="btn">Stop</button>
        <button id="btnDeactivate" class="btn">Deactivate</button>
    </div>
    <div id="chkLightingEnabled">
        <input type="checkbox" checked/>
        <div>Lighting</div>
    </div>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';

        document.getElementById("btnActivate").onclick = function () {
            globus.sun.activate();
        };

        document.getElementById("btnStop").onclick = function () {
            globus.sun.stop();
        };

        document.getElementById("btnDeactivate").onclick = function () {
            globus.sun.deactivate();
        };

        document.querySelector("#chkLightingEnabled input").onclick = function (e) {
            globus.planet.lightEnabled = this.checked;
        };

        var osm = new XYZ("OpenStreetMap", {
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });


        var globus = new Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": new GlobusTerrain(),
            "layers": [osm],
            "sun": {
                "active": false
            }
        });
    </script>
</body>

</html>